<template>
    <div class="general">
        <div class="general_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">费用结算<i class="el-icon-close"></i></div>
		</div>
        <div class="selectBox">
            <div class="selectBtn">
                下单时间
                <el-date-picker
                    style="margin: 0 20px 0 10px;"
                    v-model="valueTime"
                    type="daterange"
					@change="selectTime"
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份">
                </el-date-picker>
                提现类型
                <el-select v-model="valueType" @change="selectType" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value">
                    </el-option>
                </el-select>
                <!-- <el-button type="primary" @click="toSearchBtn">查询</el-button> -->
            </div>
            <div class="searchBox">
                <div class="item">
                    <div class="price_order">订单数量<span>{{freeInfo.count}}单</span></div>
                    <div class="price_order">经营收入<span>{{freeInfo.fee_sum}}元</span></div>
                </div>
                <div class="item">
                    <el-input style="width:50%;" type="text" v-model="input" placeholder="请输入相关信息搜索"></el-input>
                    <el-button type="primary" class="iconfont" @click="toSearchBtn">&#xe68e; 搜索</el-button>
                </div>
            </div>
        </div>
        <div class="table">
            <div class="partnerList_table">
                <div class="partnerList_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>序号</th>
              <th>订单号</th>
							<th>订单类型</th>
							<th>提现类型</th>
							<th>提现人</th>
							<th>提现时间</th>
							<th>提现金额</th>
							<th>手续费</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td>{{v.outsn}}</td>
							<td>{{v.cash_type}}</td>
							<td>{{v.bank_name}}</td>
							<td>{{v.account_name}}</td>
							<td>{{v.mobile}}</td>
							<td>{{v.total}}</td>
							<td>{{v.amount}}</td>
							<td>
								<button class="editor" @click="toEditHouse(v.id)">通过</button>
								<!-- <button class="shelves" @click="toDelHouse(v.id)">拒绝</button> -->
							</td>
						</tr>
						<tr v-if="tableList.length == 0"><td class="table_title" colspan="13">当前数据空空如也</td></tr>
					</table>
					<div class="partnerList_bottom_page">
						<div class="partnerList_bottom_page_left">
							<div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
								<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
							</div>全选
							<!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
						</div>
						<div class="partnerList_bottom_page_right">
							<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="page"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="pagesize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="total"
								background>
							</el-pagination>
						</div>
					</div>
				</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            navIndex:0,
            valueTime:[],//时间选择
            input:'',
            tableList:[],
            page:1,
            pagesize:10,
            total:0,
            checkBoxAll:[],				// 选中的数据
			shelvesAlls:[],
			checkAll:false,
            valueType:0,//选择类型
            options:[{//订单类型
                name:'全部',
                value:0
            },{
                name:'商家提现',
                value:1
            },{
                name:'设计师提现',
                value:2
            },{
                name:'施工队提现',
                value:3
            },{
                name:'创业主提现',
                value:4
            },{
                name:'创业精英提现',
                value:5
            },{
                name:'导购提现',
                value:6
            },],
			freeInfo:{},
			startDate:'',
			endDate:''
        }
    },
	mounted(){
		this.getCashOutFree()
	},
    methods: {
        changeNav(index){
            this.navIndex = index
            console.log(index,'navIndex');
        },

		// 提现手续费列表
		getCashOutFree(){
			let params = {
				role:this.valueType,
				keyword:this.input,
				sta_date:this.startDate,
				end_date:this.endDate,
				page:this.page,
				pagesize:this.pagesize
			}
			this.$http.post('/api/root/Settle/cashoutfee',params).then(res=>{
				console.log(res,'手续费列表');
				if(res.code==1){
					this.freeInfo = res.data?res.data:{}
          this.tableList = res.data.list
					this.total = res.data.count
				}
			})
		},


		// 时间选择
		selectTime(){
			this.startDate = this.valueTime?this.$moment(this.valueTime[0]).format('yyyy-MM-DD'):''
			this.endDate = this.valueTime?this.$moment(this.valueTime[1]).format('yyyy-MM-DD'):''
			this.getCashOutFree()
		},

		// 类型选择
		selectType(){
			this.getCashOutFree()
		},

		// 搜索按钮
		toSearchBtn(){
			this.getCashOutFree()
		},
        
        // 多选
		handlerCheckbox(i){
            console.log(i);
			let arr = this.checkBoxAll;
			if(arr.includes(i)){
				let index = arr.indexOf(i);
				if(index != -1){
					arr.splice(index,1);
					this.shelvesAlls.splice(index,1);
					if(this.checkBoxAll.length !== this.tableList.length) {
						this.checkAll = false;
					}
				}
			}else {
				this.checkBoxAll.push(i);
				this.shelvesAlls.push(this.tableList[i].id);
				if(this.checkBoxAll.length == this.tableList.length) {
					this.checkAll = true;
				}
			};
			console.log(this.shelvesAlls);
		},
        // 全选与全不选
		handerCheckAll(){
			this.checkAll = !this.checkAll;
			let arr = this.tableList.length;
			this.checkBoxAll = [];
			this.shelvesAlls = [];
			if(this.checkAll){
				for(let i=0;i<arr;i++){
					this.checkBoxAll.push(i);
				}
				this.checkBoxAll.map(v => {
				this.shelvesAlls.push(this.tableList[v].id.toString());;
			})
			}else {
				this.checkBoxAll = [];
				this.shelvesAlls = []
			}
			console.log(this.shelvesAlls);
		},


        handleSizeChange(val) {
			this.pagesize = val;
			this.getCashOutFree()
		},
		handleCurrentChange(val) {
		    this.page = val;
			this.getCashOutFree()
		},
    },
}
</script>

<style lang="less">
@import 'index.less';
@import '../iconfont.less';
</style>


